<template>
  <div>
    <div ref="chartColumn" style="width:100%; height:158px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { createNamespacedHelpers } from "vuex";

const { mapMutations } = createNamespacedHelpers("mes/");

export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    text: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chartColumn: null,
    };
  },
  computed: {
    GLOBAL_THEME() {
      return this.$store.state.mes.GLOBAL_THEME;
    },
  },
  methods: {
    ...mapMutations(["changeGlobalTheme"]),
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      // 进度百分比
      const option = {
        // backgroundColor: '#36467E',
        title: [
          {
            text: this.value + "%",
            left: "center",
            top: "46%",
            textStyle: {
              color: this.GLOBAL_THEME === "dark" ? "#E7F0FF" : "#3C3C3C",
              fontSize: 30,
              fontWeight: "bold",
            },
          },
          {
            text: this.text,
            left: "center",
            top: "70%",
            textStyle: {
               color: this.GLOBAL_THEME === "dark" ? "#E8EFFF" : "#646464",
              fontSize: 14,
            },
          },
        ],
        angleAxis: {
          show: false,
          // 后面的180表示圆环的跨越的角度， 如max设置为100*360/270,startAngle设置为-135
          max: (100 * 360) / 180,
          type: "value",
          startAngle: 180,
          splitLine: {
            show: false,
          },
        },
        // 修改环形的宽度
        barMaxWidth: 12,
        radiusAxis: {
          show: false,
          type: "category",
        },
        polar: {
          // 设置环形的位置
          center: ["50%", "66%"],
          // 设置环形大小
          radius: "220%",
        },
        series: [
          {
            type: "bar",
            data: [
              {
                value: this.value,
                itemStyle: {
                  // 这里是已经达到进度的颜色
                  color: this.color,
                },
              },
            ],
            barGap: "-100%",
            coordinateSystem: "polar",
            z: 3,
          },
          {
            type: "bar",
            data: [
              {
                value: 100,
                itemStyle: {
                  // 这里是环形底色
                  color: "#EEEEEE",
                  borderWidth: 0,
                },
              },
            ],
            barGap: "-100%",
            coordinateSystem: "polar",
            z: 1,
          },
        ],
      };
      this.chartColumn.setOption(option);
    },
  },
  mounted: function() {
    this.initChart();
  },
};
</script>
